<template>
  <div class="container">
    <!-- <uni-nav-bar fixed="true" title="身份认证" statusBar="true" :border="false" left-icon="left"
      @clickLeft="back"></uni-nav-bar> -->
    <!-- 主体 -->
    <!-- <div class="body"> -->
      <!-- 表单 -->
      <!-- <uni-forms ref="form" label-width="100px" :modelValue="formData" :rules="rules">
        <uni-forms-item label="姓名" name="name" required>
          <uni-easyinput type="text" v-model="formData.name" placeholder="请输入的您的姓名" :inputBorder="false" />
        </uni-forms-item>
        <uni-forms-item label="身份证号" name="id" required>
          <uni-easyinput type="text" v-model="formData.id" placeholder="请输入您的身份证号" :inputBorder="false" />

        </uni-forms-item>
      </uni-forms> -->
      <!-- 确认按钮 -->
      <!-- <button class="confirm-btn" @click="submit">确认</button> -->
      <!-- 提示文本 -->
      <!-- <div class="tip">点击“确认”即表示同意
        <text class="tip-link" @click="navigateTo('user-service-agreement')">《嗨喵主持人用户服务协议》</text>和
        <text class="tip-link" @click="navigateTo('privacy-policy')">《嗨喵主持人隐私政策》</text>
      </div> -->
    <!-- </div> -->
  </div>
</template>

<script setup lang="ts">
import { requestRealName } from "@/api/api-user";
import { back, navigateTo } from "@/utils/navigate";
import { showToast } from "@/utils/tools";

import { ref } from "vue";

// 表单数据
const formData = ref<{ name: string; id: string }>({
  name: "",
  id: "",
});

// 表单验证规则
const rules = ref({
  name: [
    {
      required: true,
      format: "number",
    },
  ],
  id: [
    {
      required: true,
      format: "string",
      rules: [
        {
          // 身份证号正则
          pattern:
            "^[1-9]\\d{5}(19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$",
        },
      ],
    },
  ],
});

// 提交表单
const submit = () => {
  console.log(formData.value);
  // const currentInstance = getCurrentPages()[getCurrentPages().length - 1]
  // const form = currentInstance.$vm.$refs.form
  // TODO 这里的校验有问题，无论什么情况都会通过，所以暂时不用
  // form.validate().then(res => {
  //   console.log('res', res)
  // }).catch(err => {
  //   console.log('err', err)
  // })
  // 检查姓名是否为空
  if (!formData.value.name) {
    showToast("姓名不能为空")
    return;
  }
  // 检查身份证号是否为空
  if (!formData.value.id) {
    showToast("身份证号不能为空")
    return
  }
  // 检查姓名是否是纯数字
  // if (/^\d+$/.test(formData.value.name)) {
  //   showToast("姓名不能是纯数字")
  //   return;
  // }
  // 检查身份证号是否正确
  if (
    !/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
      formData.value.id
    )
  ) {
    showToast("你输入的身份证号有误，请重新输入")
    return;
  }
  requestRealName(formData.value.name, formData.value.id)
    .then((res: any) => {
      const resData: RealNameAuthResData = res.data;
      const code = resData.data.code;
      switch (code) {
        case '200':
          showToast("认证成功");
          back();
          break;
        case '201':
        case '202':
          showToast("认证失败，请检查信息");
          break;
      }
    });
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav"
    "body";

  .body {
    grid-area: body;

    background: #fcf8f9;
    padding: 20px 16px 0;
    display: grid;
    grid-template:
      "." 33.3333vw
      "confirm-btn" 1fr
      "tip" 1fr;

    .confirm-btn {
      align-self: end;
      grid-area: confirm-btn;
      width: 87.6923vw;
      height: 44px;
      background: #ff2459;
      border-radius: 4px;

      color: #fff;
      font-size: 16px;
    }

    .tip {
      align-self: flex-start;
      width: 90%;
      margin-top: 10px;
      grid-area: tip;
      font-size: 12px;
      color: #999999;

      .tip-link {
        color: #ff2459;
      }
    }
  }
}
</style>
